I was trying to create a page that randomizes 3 numbers from 1-20. I encountered a problem when I was trying to use document.getElementById. I was trying to substitute the value of id="large", but for some unknown reason, I always got [object HTMLParagraphElement].
Here is the source code:
<html>
<body onload = "myFunction()">
<div class="intro"></div>
<h1>The Egg Hunt</h1>
<p>Three people, Antonio, Jonathan, and Willy, participated the egg hunt competition.</p>
<p>These are the points gathered by the three participants: </p>
</div>
<div class="points">
<div class="first">
<p>Antonio</p>
<p id="num1"></p>
</div>
<div class="second">
<p>Jonathan</p>
<p id="num2"></p>
</div>
<div class="third">
<p>Willy</p>
<p id="num3"></p>
</div>
</div>
<div class="info">
<p>The one who got the most points is: </p>
<p id="large"></p>
</div>
<script>
function myFunction() {
let x = Math.floor((Math.random() * 20) + 1 );
document.getElementById("num1").innerHTML = x;
let y = Math.floor((Math.random() * 20) + 1 );
document.getElementById("num2").innerHTML = y;
let z = Math.floor((Math.random() * 20) + 1 );
document.getElementById("num3").innerHTML = z;
let largest;
if(num1 >= num2 && num1 >= num3){
largest = num1;
document.getElementById("large").innerHTML = largest;
}
else if (num2 >= num1 && num2 >= num3){
largest = num2;
document.getElementById("large").innerHTML = largest;
}
else{
largest = num3;
document.getElementById("large").innerHTML = largest;
}
}
</script>
</body>
num1, num2, and num3 are not defined in your Javascript. Automatically, they will be referred to the defined id in HTML as global variables, and being used as p elements for your case. Therefore, the fix can be modifying x, y, and z to those num variables to override them.
<html>
<body onload="myFunction()">
<div class="intro">
<h1>The Egg Hunt</h1>
<p>Three people, Antonio, Jonathan, and Willy, participated the egg hunt competition.</p>
<p>These are the points gathered by the three participants: </p>
</div>
<div class="points">
<div class="first">
<p>Antonio</p>
<p id="num1"></p>
</div>
<div class="second">
<p>Jonathan</p>
<p id="num2"></p>
</div>
<div class="third">
<p>Willy</p>
<p id="num3"></p>
</div>
</div>
<div class="info">
<p>The one who got the most points is: </p>
<p id="large"></p>
</div>
<script>
function myFunction() {
const num1 = Math.floor((Math.random() * 20) + 1);
document.getElementById("num1").innerHTML = num1;
const num2 = Math.floor((Math.random() * 20) + 1);
document.getElementById("num2").innerHTML = num2;
const num3 = Math.floor((Math.random() * 20) + 1);
document.getElementById("num3").innerHTML = num3;
let largest;
if (num1 >= num2 && num1 >= num3) {
largest = num1;
} else if (num2 >= num1 && num2 >= num3) {
largest = num2
} else {
largest = num3;
}
document.getElementById("large").innerHTML = largest;
}
</script>
</body>Would something like this work?
<html>
<body onload = "myFunction()">
<div class="intro"></div>
<h1>The Egg Hunt</h1>
<p>Three people, Antonio, Jonathan, and Willy, participated the egg hunt competition.</p>
<p>These are the points gathered by the three participants: </p>
</div>
<div class="points">
<div class="first">
<p>Antonio</p>
<p id="num1"></p>
</div>
<div class="second">
<p>Jonathan</p>
<p id="num2"></p>
</div>
<div class="third">
<p>Willy</p>
<p id="num3"></p>
</div>
</div>
<div class="info">
<p>The one who got the most points is: </p>
<p id="large"></p>
</div>
<script>
function generateNumber() {
return Math.floor((Math.random() * 20) + 1 )
}
function myFunction() {
let x = generateNumber();
document.getElementById("num1").innerText = x;
let y = generateNumber();
document.getElementById("num2").innerText = y;
let z = generateNumber();
document.getElementById("num3").innerText = z;
const largest = Math.max(x, y, z)
document.getElementById("large").innerText = largest;
}
</script>
</body>